import React, { useRef } from 'react';
import {ITodo} from '../typings';

interface Iprops{
    addTodo: (todo: ITodo) => void
    todoList: ITodo[]
}
const Input = (props: Iprops) => {
    const {addTodo, todoList} = props;
    const inputRef = useRef<HTMLInputElement>(null);
    const addItem = (): void => {
        const val: string = inputRef.current!.value.trim(); // 非空校验
        if(val.length) {
          const isExist = todoList.find(item => item.content === val);
          if(isExist){
            alert('exist already');
            return
          }
          addTodo({
            id: new Date().getTime(),
            content: val,
            completed: false
          })
        }
    }
    return (
        <div>
            <input type='text' placeholder="add todo" ref={inputRef} />
            <button onClick={addItem}>添加</button>
        </div>
    )
}

export default Input;
